<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">总览</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片模版 -->
        <el-card class="box-card">
            <!-- 标签导航 -->
            <el-tabs v-model="activeName" type="card" @tab-click="order_status">
                <el-tab-pane label="当天" name="当天"></el-tab-pane>
                <el-tab-pane label="7天" name="7天"></el-tab-pane>
                <el-tab-pane label="30天" name="30天"></el-tab-pane>
            </el-tabs>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <h1>{{ OrderFrom.TotalOrder }}</h1>
                        <h4 class="elcolh4">总运单数(单)</h4>
                        <el-button type="primary" class="elbutton" @click="PushTotal" size="small">
                            立即查看
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <h1>{{ OrderFrom.TotalGener }}</h1>
                        <h4 class="elcolh4">总设备数</h4>
                        <el-button type="primary" class="elbutton" @click="Pushtag_info" size="small">
                            立即查看
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <h1>{{ OrderFrom.GoOrder }}</h1>
                        <h4 class="elcolh4">在途运单</h4>
                        <el-button type="primary" class="elbutton" @click="GoOrder" size="small">
                            立即查看
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <h1>{{ OrderFrom.BaoJingOrder }}</h1>
                        <h4 class="elcolh4">报警运单</h4>
                        <el-button type="primary" class="elbutton" @click="BaoJingOrder" size="small">
                            立即查看看
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <br />
        <el-card class="box-card">
            <div id="main" style="height:360px;"></div>
        </el-card>
        <br />
        <el-card class="box-card">
            <!-- 标签导航 -->
            <el-tabs v-model="OrderName" type="card" @tab-click="order_status">
                <el-tab-pane label="全部" name="全部"></el-tab-pane>
                <el-tab-pane label="在途" name="在途"></el-tab-pane>
                <el-tab-pane label="完成" name="完成"></el-tab-pane>
                <el-tab-pane label="报警" name="报警"></el-tab-pane>
            </el-tabs>
            <el-table :data="OrderList" border stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="ordername" label="发货单号">
                </el-table-column>
                <el-table-column prop="tag_id" label="标签ID">
                </el-table-column>
                <el-table-column prop="name" label="货物类型">
                </el-table-column>
                <el-table-column prop="scope_temp" label="安全温度(℃)">
                </el-table-column>
                <el-table-column prop="ent_time" label="记录间隔">
                </el-table-column>
                <el-table-column prop="delay_time" label="启动延时">
                </el-table-column>
                <el-table-column prop="start_time" label="开始时间">
                </el-table-column>
                <el-table-column prop="end_time" label="结束时间">
                </el-table-column>
                <el-table-column prop="cond" label="运单状态">
                </el-table-column>
                <el-table-column prop="temp_log" label="温度记录">
                </el-table-column>
                <el-table-column prop="username" label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <router-link :to="'/order_content?oid=' + scope.row.id" @click.native="routerlink('/route_ana')">
                            <el-tooltip class="item" effect="dark" content="查看详情" placement="top" :enterable="false" v-if="scope.row.auditing != 2">
                                <el-button type="success" size="mini">
                                    <i class="el-icon-document"></i>
                                </el-button>
                            </el-tooltip>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="order_status" @current-change="order_status" :current-page.sync="pagination.page" :page-sizes.sync="pagination.sizes" :page-size.sync="pagination.size" :layout.sync="pagination.layout" :total.sync="pagination.total" background>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import moment from 'moment'
// 导入曲线图包
import echarts from 'echarts'
import { genre_list_get, total_order_get, order_status_get } from '../axios_api/api'
export default {
    data() {
        return {
            OrderList: [],
            activeName: '当天',
            OrderName: '全部',
            pagination: {
                layout: "total, sizes, prev, pager, next, jumper",
                sizes: [3, 5, 10, 20],
                page: 1,
                size: 3,
                total: 0,
            },
            // 运单变量
            OrderFrom: {
                // 总运单数
                TotalOrder: 0,
                // 在途总运单数
                GoOrder: 0,
                // 报警总运单数
                BaoJingOrder: 0,
                // 设备总数
                TotalGener: 0,
            },
            // 折线图参数
            send_data: [],
            take_data: [],
            time_data: [],
        }
    },
    mounted() {
        this.GetOrderFrom();
        this.Options();
        this.order_status();
    },
    methods: {
        // 超链接跳转时间
        routerlink(route_ana) {
            localStorage.removeItem('activePath')
            localStorage.setItem('activePath', route_ana)
        },
        // 查看设备
        Pushtag_info() {
            this.$router.push('/tag_info')
        },
        // 查看全部订单
        PushTotal() {
            this.OrderName = '全部';
            this.order_status();
        },
        // 查看在途订单
        GoOrder() {
            this.OrderName = '在途';
            this.order_status();
        },
        // 查看报警运单
        BaoJingOrder() {
            this.OrderName = '报警';
            this.order_status();
        },
        // 已发货运单状态
        order_status() {
            let params = { OrderName: this.OrderName, activeName: this.activeName, page: this.pagination.page, size: this.pagination.size }
            total_order_get(params).then(resp => {
                // // 折线图变量
                // this.time_data = []
                // this.send_data = []
                // this.take_data = []
                let time_data = '';
                for (let i = 0; i < resp.orderlist.length; i++) {
                    resp.orderlist[i].start_time = moment(resp.orderlist[i].start_time).format('YYYY-MM-DD HH:mm:ss')
                    resp.orderlist[i].end_time = moment(resp.orderlist[i].end_time).format('YYYY-MM-DD HH:mm:ss')
                    if (resp.orderlist[i].end_time === 'Invalid date') resp.orderlist[i].end_time = '暂无'
                    if (resp.orderlist[i].cond === 1) resp.orderlist[i].cond = '在途'
                    else if (resp.orderlist[i].cond === 2) resp.orderlist[i].cond = '完成'
                    time_data = resp.orderlist[i].start_time
                    time_data = moment(time_data).format('YYYY-MM-DD')
                }
                console.log(resp)
                this.pagination.total = resp.total
                this.OrderList = resp.orderlist
                this.OrderFrom.TotalOrder = resp.total
                this.OrderFrom.GoOrder = resp.cond
                this.OrderFrom.BaoJingOrder = resp.temp_log
                this.time_data.push(time_data)
                this.send_data.push(this.OrderFrom.TotalOrder)
                this.take_data.push(resp.total - resp.cond)
                let timedata = this.time_data
                let send = this.send_data
                let take = this.take_data
                console.log(send)
                console.log(take)
                this.Options(timedata, send, take)
            })
        },
        // 获取运单及设备数量
        GetOrderFrom() {
            // 获取设备数量
            genre_list_get().then(resp => {
                if (resp.code === 200) {
                    this.OrderFrom.TotalGener = resp.genrelist.length
                }
            })
        },
        // 曲线图
        Options(timedata, send, take) {
            console.log(timedata)
            console.log(send)
            console.log(take)
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            let option = {
                // 标题
                title: {
                    text: '历史记录'
                },
                tooltip: {
                    trigger: 'axis'
                },
                // 趋势线对应数据标题
                legend: {
                    data: ['发货数量', '收货数量']
                },
                // 间距
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                // 下载趋势图
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                // 横坐标参数
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: timedata
                },
                // 纵坐标参数
                yAxis: {
                    type: 'value'
                },
                // 趋势数据
                series: [
                    {
                        name: '发货数量',
                        type: 'line',
                        data: send
                    },
                    {
                        name: '收货数量',
                        type: 'line',
                        data: take
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #e6e9ee;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    height: 250px;
    width: 350px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.el-row {
    margin-top: -40px;
}
h1 {
    font-size: 60px;
    padding-top: 40px;
    color: #39486c;
}
.elcolh4 {
    margin-top: -60px;
    color: #8f98ad;
    font-size: 15px;
}
.elbutton {
    border-radius: 20px;
    width: 150px;
    font-size: 15px;
}
</style>